<template>
  <div class="w-1/2 all" style="background-color: #9f818c;">
    <div class="left">
      <img v-if="info.zx_pic" :src="info.shop_pic" alt="">
      <img v-else src="../assets/imgs/avacter.png" alt="">

      <div>{{ info.zxname }}</div>
    </div>
    <div class="right">
      <div class="r-top">
        下单GMV <span>{{ info.price }}</span>
      </div>
      <div class="r-bot">
        <img v-if="info.shop_pic" :src="info.shop_pic" alt="">
      <img v-else src="../assets/imgs/moren.webp" alt="">

        <div>{{ info.shop_name }}</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { toRefs ,onMounted ,ref } from 'vue'
const props = defineProps({
  info: Object,
})
const {info} =toRefs(props)
</script>

<style lang="scss" scoped>
.all {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;

  .left {
    width: 25%;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #4a3026;
    font-weight: bold;
    // font-size: 1.25rem;
    font-size:calc(100vw * 20 / 1920); 

    img {
      // width: 5rem;
      // height: 5rem;
      width: calc(100vw * 80 / 1920);
      height: calc(100vw * 80 / 1920);
      border-radius: 50%;
      border: 0.1875rem solid #fff;
    }
  }

  .right {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;

    .r-top {
      color: #4a3026;
      // font-size: 2.1875rem;

      font-size:calc(100vw * 35 / 1920); 

      font-weight: bold;
      margin-bottom: 1.25rem;

      span {
        color: #b0412a;
        // font-size: 2.625rem;
        font-size:calc(100vw * 42 / 1920); 
        font-weight: bold;
      }
    }

    .r-bot {
      display: flex;
      align-items: center;

      color: #4a3026;
      font-size:calc(100vw * 35 / 1920); 

      // font-size: 2.1875rem;
      font-weight: bold;

      img {
        // width: 3.125rem;
        // height: 3.125rem;
        width: calc(100vw * 50 / 1920);
        height: calc(100vw * 50 / 1920);
        border-radius: 50%;
        margin-right: 0.625rem;
      }
    }
  }
}
</style>